<template>
  <div class="edit_container">
    <!--  新增时输入 -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)" />
    <el-upload
      class="avatar-uploader upload_icon"
      :action="action"
      name="multipartFile"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload">
      <div
        class="upload_div" />
    </el-upload>
    <div v-if="loading"
      class="loading">
      正在上传图片...
    </div>
  </div>
</template>
<script>
import { HTTP_URI } from '../../api/baseUrl'
import { quillEditor, Quill } from 'vue-quill-editor' // 调用编辑器
import { ImageExtend } from 'quill-image-extend-module'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/ImageExtend', ImageExtend)
import resizeImage from 'quill-image-resize-module' // 图片缩放组件引用
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop) // 注册
Quill.register('modules/resizeImage ', resizeImage)
const toolbarOptions = [
  ['image'], // 清除样式, // 上传图片、上传视频
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  [{ header: 1 }, { header: 2 }], // 几级标题
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  // [{ direction: 'rtl' }], // 文字输入方向
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 颜色选择
  [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'FangSong', 'Arial'] }], // 字体
  [{ align: [] }], // 居中
  ['clean']
]
export default {
  name: 'RichTextEditor',
  components: {
    quillEditor
  },
  props: {
    conact: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      content: ``,
      action: HTTP_URI.UPLOADIMG,
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'multipartFile',
            action: HTTP_URI.UPLOADIMG, // 这里写入请求后台地址 例如：
            response: res => {
              return res.data.previewUrl + '/' + res.data.fileName // 这里写入请求返回的数据，也就是一个图片字符串
            }
          },
          imageDrop: true, // 图片拖拽
          imageResize: {
            // 放大缩小
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: value => {
                // 劫持原来的图片点击按钮事件
                if (value) {
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    // 当前富文本实例
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  watch: {
    conact(val) {
      if (val) {
        if (val.includes('\t')) {
          this.content = val.replace(/\t/g, '&nbsp;&nbsp;')
        } else if (val.includes(' ')) {
          this.content = val.replace(/ /g, '&nbsp;&nbsp;')
        } else {
          this.content = val
        }
      } else this.content = ''
    }
  },
  mounted() {
    if (this.conact.includes('\t')) {
      this.content = this.conact.replace(/\t/g, '&nbsp;&nbsp;')
    } else if (this.conact.includes(' ')) {
      this.content = this.conact.replace(/ /g, '&nbsp;&nbsp;')
    } else {
      this.content = this.conact
    }
  },
  methods: {
    beforeUpload(file) {
      console.log(file)
      // this.loading = true
    },
    uploadSuccess(res) {
      // this.loading = true
      // 获取富文本组件实例
      const quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res) {
        this.editorSelection(res.data.previewUrl + '/' + res.data.fileName)
        // 获取光标所在位置
        // const length = quill.selection.savedRange.index
        // // 插入图片，res为服务器返回的图片链接地址
        // quill.insertEmbed(length, 'image', res.data.previewUrl + '/' + res.data.fileName)

        // quill.setSelection(length + 1)
        // // this.loading = false
        // console.log(this.content, '92929')
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
        // this.loading = false
        quill.setSelection(length + 1)
      }
    },
    // 富文本中插入图片
    editorSelection(imageUrl) {
      const quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      const length = quill.selection.savedRange.index
      console.log(length, 'length')
      // 插入图片，imageUrl为服务器返回的图片链接地址
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {
      this.$emit('change', this.content)
    }, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {
      this.$emit('change', this.escapeStringHTML(this.content))
    }, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    }
  }
}
</script>
<style>
img {
  max-width: 100% !important;
  height: auto !important;
}
.editor {
  line-height: normal !important;
  min-height: 360px;
  max-height: 500px;
}
.ql-container {
  min-height: 360px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}
/*
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
} */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}
/*
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
} */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
  content: '宋体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
  content: '黑体';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
  content: '微软雅黑';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
  content: '仿宋';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: 'Arial';
}
.ql-snow .ql-picker-label::before {
  position: absolute;
}
.ql-toolbar.ql-snow .ql-picker-label {
  line-height: 22px;
  position: absolute;
  top: 0;
}
</style>

<style>
.ql-editor {
  max-height: 500px;
  overflow-y: auto;
}
.upload_icon .el-upload {
  border: 0 !important;
}
.edit_container {
  position: relative;
}
.upload_icon {
  position: absolute;
  top: 0px;
  left: 10px;
  width: 30px;
  height: 30px;
}
.upload_div {
  width: 30px;
  height: 30px;
}
.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
</style>
